<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title th:text="#{iot_factory}">IOT Factory</title>
    <link href="/dc/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .form-signin {
            max-width: 330px;
            padding: 15px;
            margin: auto;
        }
        .form-floating > label {
            pointer-events: none;
        }
		.legal-info {
		    color: #6c757d; /* Bootstrap 默认的灰色 */
		    font-size: 0.875rem; /* 较小的字体 */
		}
		#language-switcher {
		    position: absolute;
		    top: 15px;
		    right: 15px;
		}
    </style>
</head>
<body class="d-flex align-items-center min-vh-100 bg-body-tertiary">
	
	<div class="d-flex justify-content-end p-3" id="language-switcher">
	    <a href="javascript:void(0);" class="text-decoration-none mx-2 text-body small" data-lang="zh_CN" title="中文" onclick="changeLanguage('zh_CN')">
	        <span class="fi fi-cn me-1"></span>中文
	    </a>
	    <a href="javascript:void(0);" class="text-decoration-none mx-2 text-body small" data-lang="en_US" title="English" onclick="changeLanguage('en_US')">
	        <span class="fi fi-gb me-1"></span>English
	    </a>
	</div>
	
    <main class="form-signin w-100 m-auto">
        <form id="loginForm">
           <h1 class="h3 mb-3 fw-normal" th:text="#{sign_in_up}">Please sign in/up</h1>
            <div class="form-floating">
                <input type="email" class="form-control" name="login" id="floatingEmail" placeholder="name@example.com">
                <label for="floatingEmail" th:text="#{email_address}">Email address</label>
            </div>
            <div class="form-floating">
                <input type="password" class="form-control" name="password" id="floatingPassword" placeholder="Password">
                <label for="floatingPassword" th:text="#{password}">Password</label>
            </div>
			<div class="text-end">
			    <a href="/dc/pub/userforget" class="small" th:text="#{forget_password}">Forgot your password?</a>
			</div>
			<div id="captchaDiv" class="form-group my-3 d-none">
			    <div class="d-flex">
			        <input type="text" class="form-control" id="captcha" name="captcha" placeholder="Enter captcha" required>
			        <img id="captchaImage" src="/dc/pub/captcha" alt="captcha" class="ml-2" style="cursor: pointer;" onclick="refreshCaptcha()">
			    </div>
			</div>
            <div class="form-check text-start my-3">
                <input class="form-check-input" type="checkbox"  name="remember" id="flexCheckDefault">
                <label class="form-check-label" for="flexCheckDefault" th:text="#{remember_me}">
                    Remember me for 90 days
                </label>
            </div>
            <button class="btn btn-primary w-100 py-2" id="submitButton" type="button" th:text="#{submit}">Submit</button>
			
			<div id="forwardMessage" th:if="${forwardMessage != null}" class="mt-3">
			    <div class="alert alert-danger" role="alert">
			        <span th:text="${forwardMessage}"></span>
			    </div>
			</div>
			
            <div id="responseMessage" class="mt-3"></div>
            <div id="loadingSpinner" class="spinner-border text-primary d-none" role="status">
                <span class="visually-hidden" th:text="#{loading}">Loading...</span>
            </div>
			<p class="legal-info">
			     <span th:text="#{by_sign_in_1}"></span> <a href="/dc/pub/doc?page=agreement" target="_blank"><span th:text="#{by_sign_in_2}"></span></a>.
			 </p>
            <p class="mt-5 mb-3 text-body-secondary">&copy; <span th:text="#{iot_factory}"></span> <span th:text="${year}"></span></p>
        </form>
    </main>
    <script src="/dc/js/bootstrap.bundle.min.js"></script>
	<th:block th:insert="~{fragments/nav :: scriptFunctions}"></th:block>
    <script>
		
		document.addEventListener("DOMContentLoaded", function () {
		    const links = document.querySelectorAll("#language-switcher a");
		    links.forEach(link => {
		        link.addEventListener("click", function (event) {
		            const lang = this.getAttribute("data-lang");
		            
		            // 设置有效期为 10 年后
		            const expirationDate = new Date();
		            expirationDate.setFullYear(expirationDate.getFullYear() + 10);  // 设置为 10 年后的日期
		            
		            // 设置永久 Cookie
		            document.cookie = `lang=${lang}; path=/; expires=${expirationDate.toUTCString()}`;
		            
		            // 刷新页面
		            location.reload();
		        });
		    });
			
			document.querySelector('#submitButton').addEventListener('click', async () => {
				event.preventDefault(); 
			    const formData = new FormData(document.querySelector('#loginForm'));
			    const data = Object.fromEntries(formData);
			    document.getElementById('loadingSpinner').classList.remove('d-none');
			    const responsemsg=document.querySelector('#responseMessage');
			    try {
					const result = await (await makeRequest('POST','/dc/pub/loginrefresh',data,true)).json();
					if((result.captchaShow)&&(result.captchaShow==1))
						document.getElementById('captchaDiv').classList.remove('d-none');	
			        if((result.status)&&(result.status=="ok")){
			        	//responsemsg.innerHTML = `<div class="alert alert-success" role="alert">login success</div>`;
			        	window.location.href = "/dc/web/dashboard";
			        }else if((result.status)&&(result.status!="ok"))
			            responsemsg.innerHTML = `<div class="alert alert-danger" role="alert">${result.status}</div>`;
			        else
			        	responsemsg.innerHTML = `<div class="alert alert-danger" role="alert">login failed</div>`;
					refreshCaptcha();
			    } catch (error) {
			    	responsemsg.innerHTML = `<div class="alert alert-danger" role="alert">Error: ${error.message}</div>`;
			    } finally {
			        document.querySelector('#loadingSpinner').classList.add('d-none');
			    }
			});
			
		});
    </script>
</body>
</html>
